<template>
	<!-- 为你推荐 -->
	<view class="hot-goods mx20 my20">
		<u-waterfall v-model="goodsList" ref="uWaterfall" v-if="goodsList.length">
			<template v-slot:left="{ leftList }">
				<view class="goods-item mb20" v-for="leftGoods in leftList" :key="leftGoods.id">
					<t-goods-card
						:image="leftGoods.image"
						:title="leftGoods.title"
						:subtitle="leftGoods.subtitle"
						:price="leftGoods.price"
						:is_next_day_delivery="leftGoods.is_next_day_delivery"
						:originPrice="leftGoods.original_price"
						:detail="leftGoods"
						@click="$Router.push({ path: '/pages/goods/detail/index', query: { id: leftGoods.id } })"
					></t-goods-card>
				</view>
			</template>
			<template v-slot:right="{ rightList }">
				<view class="goods-item mb20" v-for="rightGoods in rightList" :key="rightGoods.id">
					<t-goods-card
						:image="rightGoods.image"
						:title="rightGoods.title"
						:subtitle="rightGoods.subtitle"
						:price="rightGoods.price"
						:is_next_day_delivery="rightGoods.is_next_day_delivery"
						:originPrice="rightGoods.original_price"
						:detail="rightGoods"
						@click="$Router.push({ path: '/pages/goods/detail/index', query: { id: rightGoods.id } })"
					></t-goods-card>
				</view>
			</template>
		</u-waterfall>
		<button v-if="total > perPage" class="cu-btn refresh-btn my20 x-f" @tap.stop="loadMore">
			<text class="cuIcon-refresh" :class="{ 'refresh-active': isRefresh }"></text>
			{{ listParams.page >= lastPage ? '收起' : '加载更多' }}
		</button>
	</view>
</template>

<script>
/**
 * 自定义之为你推荐
 * @property {Object} detail - 推荐商品信息
 */
export default {
	components: {},
	data() {
		return {
			listParams: {
				page: 1
			},
			lastPage: 1, //分页总数
			total: 0, //总商品数
			perPage: 0, //单页商品数
			goodsList: [],
			isRefresh: false
		};
	},
	props: {
		detail: {
			type: Object,
			default: null
		}
	},
	created() {
		if (this.detail.id) {
			this.listParams.category_id = this.detail.id;
			this.getGoodsList();
		}
		if (this.detail.ids) {
			this.listParams.goods_ids = this.detail.ids;
			this.getGoodsList();
		}
	},
	computed: {},
	methods: {
		// 商品列表
		getGoodsList() {
			let that = this;
			that.$api('goods.lists', this.listParams).then(res => {
				if (res.code === 1) {
					this.lastPage = res.data.last_page;
					this.total = res.data.total;
					this.perPage = res.data.per_page;
					this.isRefresh = false;
					that.goodsList = [...that.goodsList, ...res.data.data];
				}
			});
		},

		// 加载更多
		loadMore() {
			if (!this.isRefresh) {
				// 加载更多
				if (this.listParams.page < this.lastPage) {
					this.isRefresh = true;
					this.listParams.page += 1;
					this.getGoodsList();
				} else {
					// 重置为1页数据
					this.listParams.page = 1;
					this.lastPage = 1;
					this.goodsList = [];
					this.getGoodsList();
				}
			}
		}
	}
};
</script>

<style lang="scss">
// 为你推荐
.hot-goods {
	background: none;
	.refresh-btn {
		margin-left: 50%;
		transform: translateX(-50%);
		width: 156rpx;
		height: 50rpx;
		background: #ffffff;
		border-radius: 25rpx;
		font-size: 22rpx;
		font-weight: 500;
		color: #999999;
		white-space: nowrap;
		.cuIcon-refresh {
			color: #dbdbdb;
			margin-right: 12rpx;
			font-size: 32rpx;
		}
	}
	.refresh-active {
		transform: rotate(360deg);
		transition: all linear 0.5s;
	}
}
</style>
